<template>
  <div class="card-content-area" :class="id" v-if="chartData && chartData.length">
    <div class="chart-box" :id="id"></div>
    <div class="chartList">
      <div class="chartConPer" v-for="(item,index) in chartData" :key="index" >
        <i :style="{background: color[index]}"></i>
        <!-- <span class="proItem" :style="{color: color[index]}" :title="item.name">{{item.name}}</span> -->
        <a-tooltip :title="item.name">
          <span class="proItem" :style="{color: color[index]}" :title="item.name">{{item.name}}</span>
        </a-tooltip>
        <span class="percent">{{getDateToFixed(item)}}%</span>
        <a-tooltip :title="item.value">
          <span class="number" :title="item.value+'个'">{{item.value}}个</span>
        </a-tooltip>
        <!-- <span class="number">{{item.value}}个</span> -->
      </div>
    </div>
  </div>
  <div class="card-content-area"  v-else>
     <a-empty description="暂无数据" class="nodata" style="margin-top: 20px"/>
  </div>
</template>
<script>
export default {
  props: {
    allLength: {
      type: Number,
      default: 100
    },
    id: {
      type: String,
      default: ""
    },
    chartData: {
      type: Array,
      default: () => {
        return []
      }
    },
    chartType: {
      type: String,
      default: "pie"
    },
    titleData: {
      type: Array,
      default: () => {
        return ["标题1","标题2"]
      }
    },
    color: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
    
    }
  },
  mounted() {
    // this.$nextTick(function() {
    //     console.log(document.querySelector('.partTwo').offsetHeight);
    //     console.log(document.querySelector('.partTwo').offsetWidth);
    // })
  },
  watch: {
    chartData: {
      handler(v) {
        const _this = this
        if(v && v.length && this.id) {
          this.$nextTick(function() {
            _this.drawChart(v,this.id)
          })
        }
      },
      deep: true,
    },
  },
  methods: {
    getDateToFixed(data) {
      if(!data.value) {
        return 0
      } else {
        return (data.value / this.allLength * 100 ).toFixed(2)
      }
    },
    drawChart (data,id) {
      let width = document.querySelector('.partTwo').offsetWidth * .33 * 0.45 + 'px'
      let height = document.querySelector('.partTwo').offsetHeight - 36 + 'px'
      let text = this.titleData[0]
      let title = this.titleData[1]
      let cahrtDom = document.getElementById(id)
      let myChart = this.$echarts.init(cahrtDom)
      // myChart.getDom().style.height = 200+"px"
      let option = {
        color: this.color,
        tooltip: {
          trigger: 'item'
        },
        legend: false,
        title: {
          text: title,
          left: "center",
          top: "50%",
          textStyle: {
            color: "rgba(0,0,0,0.85)",
            fontSize: 20,
            align: "center",
            fontWeight: 500
          }
        },
        graphic:{
          type:"text",
          left:"center",
          top:"40%",
          style:{
            text,
            textAlign:"center",
            fill:"rgba(0,0,0,0.45)",
            fontSize:14,
          }
        },
        series: [
          {
            name: '',
            type: this.chartType,
            radius: ['60%', '80%'],
            center:["50%","50%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            itemStyle: {
              borderWidth: 2,
              borderColor: "#fff"
            },
            emphasis: {
              label: {
                show: false,
              }
            },
            labelLine: {
              show: false
            },
            data
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      myChart.resize( {
        width,
        height
      })
    //   window.onresize = function () {
    //     myChart.resize()
    //   }
    },
  }
    
}
</script>
<style lang="less" scoped>
  .card-content-area {
    width: 100%;
    position: relative;
    height: calc( 100% - 40px);
    .chart-box {
      height: 100%;
    }
    .chartList {
      position: absolute;
      right: 0px;
      overflow-x: hidden;
      overflow-y: auto;
      top: 0;
      top: 50%;
      transform: translateY(-50%);
      .chartConPer {
         position: relative;
         height: 32px;
         line-height: 32px;
         span{
           display: inline-block;
           width: 60px;
           text-align: left;
           padding:0 12px;
           overflow: hidden;
           white-space: nowrap;
           text-overflow: ellipsis;
         }
         .proItem::after {
           content: "";
           display: block;
           position: absolute;
           right: 158px;
           top: 12px;
           width: 1px;
           height: 10px;
           border-left: 1px solid #dbdbdb;
           
         }
         .percent {
           color: rgba(0,0,0,0.45);
           padding-left: 8px;
           width: 80px;
           text-align: left;
         }
         .number {
           width: 74px;
           font-weight: 500; 
           color: #444;
           text-align: left;
          //  padding-left: 10px;
         }
         i{ 
           display: inline-block;
           position: absolute;
           top: 12px;
           left: 0;
           width: 6px;
           height: 6px;
           border-radius: 50%;
           line-height: 30px;
         }
      }
      
    }
    .chartList::-webkit-scrollbar {
      width: 4px;
    }
    .chartList::-webkit-scrollbar-thumb {
      border-radius: 4px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    }
    .chartList::-webkit-scrollbar-track {
      -webkit-box-shadow: 0;
      border-radius: 0;
      background: #f6f8ff;
    }

  }
.currentMonth {
  .proItem{
     width: 80px!important;
  }
}
.lxqk {
  .proItem {
    width: 80px!important;
  }
}
.projectType{
  .proItem{
     width: 120px!important;
  }
  .chartList{
    height: 170px;
    right: 10px;
  }
}
</style>